<template>
    <div class="mainBox">
        <div class="myTab">
            <el-table
                :data="tableData"
                :span-method="objectSpanMethod"
                border
                style="width: 100%"
                :header-row-style="{
                    textAlign: 'center',
                    height: '25px',
                    backgroundColor: 'var(--main-bgc)',
                }"
                :header-cell-style="{
                    backgroundColor: 'var(--main-bgc)',
                }"
                :row-style="{
                    backgroundColor: 'var(--main-bgc)',
                }"
                :cell-style="{
                    backgroundColor: 'var(--main-bgc)',
                }"
            >
                <el-table-column prop="date" label="车站名" width="180">
                    <template slot-scope="scope">
                        <el-select
                            v-model="region"
                            @change="changeSelect"
                            placeholder="请选择活动区域"
                        >
                            <el-option
                                v-for="item in selectData"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="信号机名称" width="180">
                    <template slot-scope="scope">
                        <el-select
                            v-model="code"
                            @change="queryData"
                            placeholder="请选择活动区域"
                        >
                            <el-option
                                v-for="item in selectCode"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="kilometerPost"
                    label="公里标"
                    width="180"
                >
                </el-table-column>
                <el-table-column prop="installationMethod" label="安装方式">
                </el-table-column>
                <el-table-column prop="lampPosition" label="灯位">
                </el-table-column>
                <el-table-column prop="type" label="类型"> </el-table-column>
                <el-table-column prop="remark" label="备注"> </el-table-column>
            </el-table>
        </div>
        <div class="search">
            <el-select
                v-model="type"
                @change="getChartData"
                placeholder="请选择活动区域"
            >
                <el-option
                    v-for="item in selects"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
        </div>
        <div class="dataBox">
            <div class="remark">
                <h3>检修备注</h3>
                <div
                    v-for="(item, index) in remark"
                    :key="index"
                    style="display:flex;margin-bottom:10px;"
                >
                    <div class="time" style="width:180px;flex-shrink:0;">
                        {{ item.remarkTime }}
                    </div>
                    <div>{{ item.content }}</div>
                </div>
            </div>
            <div class="output">
                <div class="myCharts">
                    <h3 style="margin-left:20px;">动态曲线图</h3>
                    <div class="Charts" ref="myChart"></div>
                </div>
                <div class="tabs">
                    <el-table
                        :data="tabData"
                        border
                        style="width: 100%"
                        height="160"
                    >
                        <el-table-column prop="time" label="时间" width="180">
                        </el-table-column>
                        <el-table-column
                            prop="inputVoltageT"
                            label="输入电压(测试)"
                            width="180"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="inputVoltageA"
                            label="输入电压(调整)"
                            width="180"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="outputVoltage1T"
                            label="输出电压1(测试)"
                            width="180"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="outputVoltage1A"
                            label="输出电压1(调整)"
                            width="180"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="outputVoltage2T"
                            label="输出电压2(测试)"
                            width="180"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="outputVoltage2A"
                            label="输出电压2(调整)"
                            width="180"
                        >
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            year: "",
            tableData: [{}],
            selectData: [],
            selectCode: [],
            region: "",
            code: "",
            remark: [],
            tabData: [],
            selects: [],
            type: "",
            times: [],
            options: [],
            min: Infinity,
        };
    },
    created() {
        this.$http
            .get("services/app/XinHaoJiService/GetXinHaoJiSelect")
            .then((res) => {
                this.selectData = res.data.result;
            });
    },
    mounted() {},
    methods: {
        initChart() {
            let dom = this.$refs.myChart;
            let myChart = echarts.init(dom);
            let option = {
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: "category", // 还有其他的type，可以去官网喵两眼哦
                    data: this.times, // x轴数据
                    // x轴名称样式
                    // axisLabel: {
                    //     interval:4,
                    // },
                    axisTick: {
                        show: false,
                    },
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                    },
                },
                textStyle: { color: "#fff" },
                legend: {
                    data: ["一次测电压", "二次测电压"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                yAxis: {
                    type: "value",
                    scale: true,
                    // min: this.min - 5 < 0 ? 0 : this.min - 5,
                    // y轴名称样式
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                    },
                },
                tooltip: {
                    trigger: "axis", // axis   item   none三个值
                },
                series: this.options,
            };
            option && myChart.setOption(option, true);
        },
        changeSelect(e) {
            let option = this.selectData.filter((item) => item.label == e);
            this.selectCode = option[0].children;
        },
        queryData(e) {
            this.$http
                .get(
                    "services/app/XinHaoJiService/GetXinHaoJiInfo?machineCode=" +
                        e
                )
                .then((res) => {
                    console.log(res);
                    if (res.data.result) this.tableData = [res.data.result];
                });
            this.$http
                .get(
                    "services/app/XinHaoJiService/GetAllXinHaoJiRemark?machineCode=" +
                        e
                )
                .then((res) => {
                    this.remark = res.data.result;
                });
            this.$http
                .get(
                    "services/app/XinHaoJiService/GetXinHaoJiTable?machineCode=" +
                        e
                )
                .then((res) => {
                    this.tabData = res.data.result;
                });
            this.$http
                .get("services/app/XinHaoJiService/GetXinHaoJiDataSelect")
                .then((res) => {
                    this.selects = res.data.result;
                });
        },
        getChartData(e) {
            if (this.code.length === 0) {
                this.$message.error("请选择信号机！");
                return;
            }
            this.$http
                .get(
                    "services/app/XinHaoJiService/GetXinHaoJiData?machineCode=" +
                        this.code +
                        "&dataType=" +
                        e
                )
                .then((res) => {
                    let data = res.data.result;
                    let op1 = {
                        name: "一次测电压",
                        data: [],
                        type: "line",
                    };
                    let op2 = {
                        name: "二次测电压",
                        data: [],
                        type: "line",
                    };
                    this.times = [];
                    data.testData.forEach((item) => {
                        this.times.push(item.time);
                        // this.min = Math.min(this.min,item.testData)
                        op1.data.push(item.num);
                    });
                    data.adjustData.forEach((item) => {
                        // this.min = Math.min(this.min,item.adjustData)
                        op1.data.push(item.num);
                    });
                    this.options = [op1, op2];
                    this.initChart();
                });
        },
        //单元格合并
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            //行，列，行下标，列下标( 控制要合并的列 )
            let rowspan = this.tableData.length;
            if (columnIndex === 0) {
                if (rowIndex !== 0) {
                    return {
                        rowspan: 0, //合并的行数
                        colspan: 1,
                    };
                }
                return {
                    rowspan, //合并的行数
                    colspan: 1,
                };
            }
        },
    },
};
</script>
<style lang="less" scoped>
.mainBox {
    height: calc(100vh - 110px);
}
.myTab {
    padding: 20px;
    // background-color: var(--color);
    margin-bottom: 10px;
    /deep/ .el-table__header-wrapper .el-table__cell {
        padding: 1px 0;
    }
}
/deep/ input {
    color: #fff;
}

.yearSele {
    padding-right: 20px;
    // background-color: #fff;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/deep/
    .el-table--enable-row-hover
    .el-table__body
    tr:hover
    > td.el-table__cell {
    background-color: var(--color);
}
.search {
    // background-color: #fff;
    padding-right: 20px;
    margin: 10px 0;
    height: 60px;
    display: flex;
    padding-top: 10px;
    justify-content: flex-end;
}
.dataBox {
    height: 600px;
    display: flex;
    justify-content: space-between;
    .remark {
        // background-color: var(--color);
        height: calc(100% - 20px);
        width: calc(49.5% - 20px);
        padding: 10px;
    }
    .output {
        height: 100%;
        width: 49.5%;
        .myCharts {
            position: relative;
            // background-color: var(--color);
            height: 390px;
            margin-bottom: 10px;
            h3 {
                position: absolute;
            }
            .Charts {
                position: absolute;
                top: 63px;
                width: 100%;
                height: 327px;
            }
        }
        .tabs {
            // background-color: var(--color);
            height: 180px;
            padding: 10px;
        }
    }
}
/deep/ .el-table tr {
    background-color: var(--main-bgc);
}
/deep/ .el-table__row:hover {
    background-color: var(--main-bgc);
}
/deep/ .el-table__header {
    background-color: var(--main-bgc) !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px;
}
/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}

/deep/ .el-cascader {
    .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
}

/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}
.el-table {
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    padding-bottom: 5px;
    /deep/.el-table__row:nth-child(2n + 1) {
        // background-color: #f8f8f8 !important;
    }
}
/deep/ .el-input {
    input {
        background-color: var(--input-bgc);
    }
}
/deep/ .el-input__inner::placeholder {
    color: var(--input-fc);
}
/deep/ .el-cascader {
    .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
}
/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}
/deep/ .el-table thead {
    color: var(--main-fc);
    // background-color: red;
    tr {
        background-color: var(--main-bgc);
    }
}
/deep/ .el-table {
    border: none;
    padding: 0;
    background-color: var(--main-bgc);
    .el-table__empty-block {
    }
    .el-table__row {
        border: none;
    }
    input {
        background-color: var(--input-bgc);
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
    .el-table__body-wrapper {
        background-color: #323232 !important;
    }
    color: var(--main-fc);
}
/deep/ .el-table td.el-table__cell,
/deep/ .el-table th.el-table__cell.is-leaf {
    // border-bottom: none;
    background: none;
}
/deep/ .el-table thead.is-group th.el-table__cell {
    background-color: var(--main-bgc);
}
</style>
